<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<script src="<%=request.getContextPath() %>/statics/common/vendor/jquery.min.js"></script>
		<!--<link href="vendor/bootstrap.css" rel="stylesheet">-->
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="<%=request.getContextPath() %>/statics/common/styles/backstage.css" />
		<link rel="stylesheet" href="<%=request.getContextPath() %>/statics/common/vendor/dashboard.css" />
		<script src="<%=request.getContextPath() %>/statics/common/vendor/bootstrap.min.js"></script>
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body>
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
						<a class="navbar-brand" href="<%=request.getContextPath() %>/index.jsp">嗒嗒嗒博客</a>
				</div>
				<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-9" aria-expanded="false" style="height: 1px;">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">欢迎：${user.name }</a></li>
						<li><a href="#" data-toggle="modal" data-target="#myModal1" onclick="blog.getCategory(${user.id})">发表文章</a></li>
						<li><a href="<%=request.getContextPath() %>/user/logout">注销</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content loginbox">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">发表文章</h4>
					</div>
					<form class="form-signin" role="form" id="articleForm" method="post">
						<input type="hidden" name="userId" value="${user.id }">
						<input type="text" name="title" class="form-control" placeholder="标题" required autofocus>
						<textarea rows="10" cols="20" name="content" class="form-control" placeholder="请输入内容" required></textarea>
						<select id="category" name="categoryId">
							
						</select>
						<button class="btn btn-lg btn-primary btn-block" onclick="addArticle()">提交</button>
					</form>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
					<ul class="nav nav-sidebar" id="menuUl">
					</ul>
				</div>
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h3 class="sub-header" id="topTitle"></h3>
					<div class="table-responsive">
						<table class="table">
							<thead>
								<tr id="title">
									
								</tr>
							</thead>
							<tbody id="dataList">
							
							</tbody>
						</table>
						<ul class="pagination" id="pageList">
						</ul>
					</div>
				</div>
			</div>
		</div>

	<c:set var="ctx" value="<%=request.getContextPath()%>"></c:set>
	<script>
		window.ctx = '${ctx}';
		var roleId = '${user.roleId}';
		var userId = '${user.id}';
		function addArticle(){
			$.post(window.ctx + '/sys/addArticle',$('#articleForm').serialize());
		}
		var blog = {
				init: function(rId,uId){
					$.post('<%=request.getContextPath()%>/user/getMenu',{roleId:rId},
							function(data){
								if(data){
									for (var i = 0; i < data.length; i++) {
										$('#menuUl').append('<li><a href="#" onclick="blog.getList(&apos;'+ data[i].url +'&apos;,'+ uId +',1)" class="list-group-item">'+ data[i].name +'</a></li>');
									}
								}
					});
				},
				getList:function(url,uId,no){
					$.post(window.ctx +'/'+ url,{userId:uId,pageNo:no},
							function(data){
								if(data){
									$('#title').html('');
									$('#dataList').html('');
									$('#pageList').html('');
									$('#topTitle').html(data[0][0]);
									for(var i=1;i<data[0].length;i++) {
										$('#title').append('<th>'+data[0][i]+'</th>');
									}
									var html = [];
									var titleSize = data[0].length;
									var pageModel = data[1];
									var list = data[1].list;
									var num = (pageModel.pageNo-1)*pageModel.pageSize;
									for (var m = 0; m < list.length; m++) {
										html.push('<tr class="active">');
										html.push('<td>'+ (num+m+1) +'</td>');
										for (var j = 1; j < titleSize-2; j++) {
											html.push('<td>'+ list[m][j] +'</td>');
										}
										html.push('<td>');
										html.push('<button type="button" class="btn btn-default btn-xs  btn-warning">修改</button>');
										html.push('<button onclick="blog.remove(&apos;'+ url +'&apos;,'+ list[m][0] +',this)" type="button" class="btn btn-default btn-xs  btn-danger">删除</button>');
										html.push('</td></tr>');
									}
									$('#dataList').append(html.join(''));
									
									var html2 = [];
									html2.push('<li><a href="#" onclick="blog.getList(&apos;'+url+'&apos;,'+uId+','+pageModel.first+')">&laquo;</a></li>');
									html2.push('<li><a href="#" onclick="blog.getList(&apos;'+url+'&apos;,'+uId+','+pageModel.pre+')">&lt;</a></li>');
									html2.push('<li><a href="#" onclick="blog.getList(&apos;'+url+'&apos;,'+uId+','+pageModel.next+')">&gt;</a></li>');
									html2.push('<li><a href="#" onclick="blog.getList(&apos;'+url+'&apos;,'+uId+','+pageModel.last+')">&raquo;</a></li>');
									$('#pageList').append(html2.join(''));
								}
					});
				},
				remove: function(url,id,obj){
					$.post(window.ctx + '/'+url+'Delete',{id:id},
							function(){
								$(obj).parent().parent().remove();
					});
					
				},
				getCategory: function(id){
					$.post(window.ctx + '/user/getCategory',{userId:id},
							function(data){
								if(data){
									var html = [];
									for(var i in data){
										html.push('<option value="'+ data[i].id +'">'+ data[i].name +'</option>');
									}
									$('#category').append(html.join(''));
								}
					});
				}
				
		}
		$(function(){
			blog.init(roleId,userId);
		});
	</script>
	</body>
</html>